<template>
    <div>
        <!--主题页面展示-->
         <div v-if="this.$store.state.manmanage">
             <!--1-->
            <el-row class="nav_a_top">
                <el-col :span="12"><div class="grid-content bg-purple">员工列表</div></el-col>
                <el-col :span="12" @click.native="addcangui"><div class="grid-content bg-purple-light"><div class="nav_a_top_div">添加员工</div></div></el-col>
            </el-row>
            <!--2-->
            <form class="dingdan_form">
                <input type="text" placeholder="手机号">
                <input type="text" placeholder="姓名">
                <button class="dingdan_form_shaixuan">筛选</button>
            </form>
            <!--3-->
            <table class="nav_a_table fs12">
                    <tr>
                        <td>ID</td>
                        <td>姓名</td>
                        <td>手机号</td>
                        <td>性别</td>
                        <td>身份证号</td>
                        <td>添加时间</td>
                        <td>添加人</td>
                        <td>员工类型</td>
                        <td>备注</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>001</td>
                        <td>阿达西</td>
                        <td>15733333333</td>
                        <td>男</td>
                        <td>111111111111111111</td>
                        <td>2017-09-08 12：09</td>
                        <td>支付宝</td>
                        <td>管理员</td>
                        <td>暂无</td>
                        <td>正常</td>
                        <td><button class="nav_a_button">修改</button><button class="nav_a_button">停用</button></td>
                    </tr>
                </table>
         </div>
         <div v-if="this.$store.state.manadd">
            <tjygzj></tjygzj>
         </div>
    </div>
</template>
<script>
    import tjygzj from './cangui_tjyg.vue'
export default {
  name: 'yggl',
  data () {
    return {
    }
  },
  components:{
      tjygzj,
  },
  methods:{
      addcangui:function(){
          this.$store.state.manmanage=false;
          this.$store.state.manadd=true;
      }
  }
}
</script>
<style scoped>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px;}
.nav_a_top>div:nth-child(2){text-align: center;}
.nav_a_top_div{width: 100px;float: right;border: 1px solid #A9A9A9;}
/*2*/
.dingdan_form{margin: 25px 0px 45px 0px;}
.dingdan_form input{padding: 4px 0px 4px 7px;}
.nav_sel{padding: 4px 0px 4px 7px;box-sizing: border-box;width: 181px;margin-left: 10px;position:relative ;top:2px;}
.dingdan_form_shaixuan{background-color: white;border: 1px solid #bbb;width: 80px;height: 30px;display: inline-block;border-radius: 7px;margin-left: 10px;background-color: #bbb;}
/*3*/
.nav_a_table{width: 100%;}
.nav_a_table>tr:nth-child(1) td{padding: 15px 20px;background-color: #cdcdcd;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center}
.nav_a_table>tr:nth-child(2) td{padding: 15px 20px;background-color: white;border: 1px solid #bbbbbb;box-sizing: border-box;}
.nav_a_button{padding: 3px;box-sizing: border-box;margin-right:5px;}
.nav_a_table table{padding: 3px;}
</style>